<template>
  <el-dialog
    title="换题申请详情"
    :visible.sync="dialogVisible"
    width="900px"
    @close="handleClose"
    append-to-body
  >
    <div v-loading="loading">
      <!-- 学生详细信息 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">👤 学生信息</span>
        </div>
        <el-descriptions :column="2" border v-if="detail.studentName">
          <el-descriptions-item label="学生姓名">
            <span class="student-name">{{ detail.studentName }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="学号">
            {{ detail.studentNo }}
          </el-descriptions-item>
          <el-descriptions-item label="年级">
            {{ detail.grade || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="专业">
            {{ detail.major }}
          </el-descriptions-item>
          <el-descriptions-item label="班级">
            {{ detail.className }}
          </el-descriptions-item>
          <el-descriptions-item label="绩点">
            <el-tag :type="getGpaType(detail.gpa)" size="small">
              {{ detail.gpa || '-' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系邮箱" :span="2">
            <span v-if="detail.email" class="email-text">
              <i class="el-icon-message"></i>
              {{ detail.email }}
            </span>
            <span v-else>-</span>
          </el-descriptions-item>
          <el-descriptions-item label="技术栈" :span="2" v-if="detail.techStack">
            <el-tag
              v-for="(tech, index) in parseTechStack(detail.techStack)"
              :key="index"
              size="small"
              type="info"
              style="margin-right: 5px; margin-bottom: 5px;"
            >{{ tech }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="个人简介" :span="2" v-if="detail.personalIntro">
            <div class="intro-text">{{ detail.personalIntro }}</div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 变更信息 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">🔄 变更信息</span>
        </div>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="变更类型">
            <el-tag :type="isSameTeacher ? 'info' : 'primary'" size="small">
              {{ isSameTeacher ? '同教师内换题' : '跨教师换题' }}
            </el-tag>
            <span v-if="isSameTeacher" style="color: #909399; font-size: 12px; margin-left: 10px;">
              （在同一教师的不同题目间切换）
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="原题目">
            <div><strong>{{ detail.oldTopicTitle }}</strong></div>
            <div style="color: #909399; font-size: 12px; margin-top: 5px;">
              指导教师: {{ detail.oldTeacherName }} ({{ detail.oldTeacherNo }})
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="新题目">
            <div><strong>{{ detail.newTopicTitle }}</strong></div>
            <div style="color: #909399; font-size: 12px; margin-top: 5px;">
              指导教师: {{ detail.newTeacherName }} ({{ detail.newTeacherNo }})
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="变更理由">
            <div class="change-reason-text">{{ detail.changeReason }}</div>
          </el-descriptions-item>
          <el-descriptions-item label="申请时间">
            {{ parseTime(detail.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="最终状态">
            <el-tag :type="getStatusType(detail.finalStatus || detail.status)" size="small">
              {{ detail.finalStatus || detail.status }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 审核进度 -->
      <el-card shadow="never" class="detail-card">
        <div slot="header" class="clearfix">
          <span class="card-title">
            <i class="el-icon-s-check"></i> 审核进度
          </span>
        </div>

        <el-timeline style="padding-left: 10px;">
          <el-timeline-item
            :timestamp="parseTime(detail.createTime)"
            placement="top"
            type="primary"
            icon="el-icon-edit"
          >
            <h4>学生提交申请</h4>
            <p>{{ detail.studentName }} 提交了换题申请</p>
          </el-timeline-item>

          <!-- 同一教师：只显示一次审核 -->
          <template v-if="isSameTeacher">
            <el-timeline-item
              v-if="detail.oldTeacherOpinion"
              :timestamp="parseTime(detail.oldTeacherReviewTime)"
              placement="top"
              :type="detail.oldTeacherOpinion === '同意' ? 'success' : 'danger'"
              :icon="detail.oldTeacherOpinion === '同意' ? 'el-icon-check' : 'el-icon-close'"
            >
              <h4>教师审核 - {{ detail.oldTeacherOpinion }}</h4>
              <p><strong>{{ detail.oldTeacherName }}</strong></p>
              <p v-if="detail.oldTeacherReason" class="review-reason">
                意见: {{ detail.oldTeacherReason }}
              </p>
            </el-timeline-item>

            <el-timeline-item
              v-if="!detail.oldTeacherOpinion && detail.status === '待审核'"
              type="info"
              icon="el-icon-time"
            >
              <h4>等待教师审核</h4>
              <p>{{ detail.oldTeacherName }}</p>
            </el-timeline-item>
          </template>

          <!-- 不同教师：显示两次审核 -->
          <template v-else>
            <el-timeline-item
              v-if="detail.oldTeacherOpinion"
              :timestamp="parseTime(detail.oldTeacherReviewTime)"
              placement="top"
              :type="detail.oldTeacherOpinion === '同意' ? 'success' : 'danger'"
              :icon="detail.oldTeacherOpinion === '同意' ? 'el-icon-check' : 'el-icon-close'"
            >
              <h4>原教师审核 - {{ detail.oldTeacherOpinion }}</h4>
              <p><strong>{{ detail.oldTeacherName }}</strong></p>
              <p v-if="detail.oldTeacherReason" class="review-reason">
                意见: {{ detail.oldTeacherReason }}
              </p>
            </el-timeline-item>

            <el-timeline-item
              v-if="!detail.oldTeacherOpinion && detail.status === '待审核'"
              type="info"
              icon="el-icon-time"
            >
              <h4>等待原教师审核</h4>
              <p>{{ detail.oldTeacherName }}</p>
            </el-timeline-item>

            <el-timeline-item
              v-if="detail.newTeacherOpinion"
              :timestamp="parseTime(detail.newTeacherReviewTime)"
              placement="top"
              :type="detail.newTeacherOpinion === '同意' ? 'success' : 'danger'"
              :icon="detail.newTeacherOpinion === '同意' ? 'el-icon-check' : 'el-icon-close'"
            >
              <h4>新教师审核 - {{ detail.newTeacherOpinion }}</h4>
              <p><strong>{{ detail.newTeacherName }}</strong></p>
              <p v-if="detail.newTeacherReason" class="review-reason">
                意见: {{ detail.newTeacherReason }}
              </p>
            </el-timeline-item>

            <el-timeline-item
              v-if="detail.oldTeacherOpinion === '同意' && !detail.newTeacherOpinion && detail.status === '待审核'"
              type="info"
              icon="el-icon-time"
            >
              <h4>等待新教师审核</h4>
              <p>{{ detail.newTeacherName }}</p>
            </el-timeline-item>
          </template>

          <el-timeline-item
            v-if="detail.finalStatus === '已通过'"
            type="success"
            icon="el-icon-success"
          >
            <h4>换题成功</h4>
            <p v-if="isSameTeacher">教师已同意，换题完成</p>
            <p v-else>两位教师都已同意，换题完成</p>
          </el-timeline-item>

          <el-timeline-item
            v-if="detail.finalStatus === '已拒绝'"
            type="danger"
            icon="el-icon-error"
          >
            <h4>申请被拒绝</h4>
            <p>换题申请未通过</p>
          </el-timeline-item>

          <el-timeline-item
            v-if="detail.status === '已取消'"
            type="info"
            icon="el-icon-circle-close"
          >
            <h4>申请已取消</h4>
            <p>学生主动取消了换题申请</p>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getTeacherChangeRequestDetail } from "@/api/system/topicChangeRequest";

export default {
  name: "DetailDialog",
  data() {
    return {
      dialogVisible: false,
      loading: false,
      detail: {}
    };
  },
  computed: {
    /** 判断是否是同一个教师 */
    isSameTeacher() {
      return this.detail.oldTeacherId === this.detail.newTeacherId;
    }
  },
  methods: {
    /** 打开对话框 */
    open(requestId) {
      this.dialogVisible = true;
      this.getDetail(requestId);
    },
    /** 获取详情 */
    getDetail(requestId) {
      this.loading = true;
      getTeacherChangeRequestDetail(requestId).then(response => {
        this.detail = response.data;
        this.loading = false;
      });
    },
    /** 关闭对话框 */
    handleClose() {
      this.detail = {};
    },
    /** 解析技术栈 */
    parseTechStack(techStack) {
      if (!techStack) return [];
      try {
        return JSON.parse(techStack);
      } catch (e) {
        return [];
      }
    },
    /** 绩点标签类型 */
    getGpaType(gpa) {
      if (!gpa) return 'info';
      if (gpa >= 3.5) return 'success';
      if (gpa >= 3.0) return '';
      if (gpa >= 2.5) return 'warning';
      return 'danger';
    },
    /** 状态标签类型 */
    getStatusType(status) {
      const map = {
        '待审核': 'warning',
        '已通过': 'success',
        '已拒绝': 'danger',
        '已取消': 'info'
      };
      return map[status] || 'info';
    }
  }
};
</script>

<style scoped lang="scss">
.detail-card {
  margin-bottom: 20px;
  
  &:last-of-type {
    margin-bottom: 0;
  }
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.student-name {
  font-size: 15px;
  font-weight: bold;
  color: #409EFF;
}

.email-text {
  color: #409EFF;
  
  i {
    margin-right: 5px;
  }
}

.intro-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
}

.change-reason-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}

.review-reason {
  color: #606266;
  background: #f5f7fa;
  padding: 10px;
  border-radius: 4px;
  margin-top: 8px;
}

::v-deep .el-descriptions__label {
  font-weight: bold;
  width: 120px;
}

::v-deep .el-descriptions__title {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

::v-deep .el-timeline-item__timestamp {
  color: #909399;
  font-size: 12px;
}
</style>